import React, { Component } from "react";
import { NavBar, Icon } from "antd-mobile";
import { withRouter } from "react-router-dom";
import { getUserAddress, changeDefaultAddress } from "../../data/apiLiao";
import styles from "./Address.module.scss";
class Address extends Component {
  state = {
    data: [],
  };
  componentDidMount() {
    this.getAddress();
  }
  // 获取地址信息
  getAddress = async () => {
    let res = await getUserAddress();
    if (res.success) {
      let flag = true;
      // 如果最后一个地址是默认地址，那么把前面的默认地址取消
      // 这里是添加了新地址，并且新地址设为了默认地址的逻辑
      if (res.data.length !== 0) {
        if (res.data[res.data.length - 1].isDefault) {
          // 遍历
          for (let i = 0; i < res.data.length - 1; i++) {
            if (res.data[i].isDefault) {
              let resNew = await changeDefaultAddress({
                id: res.data[i].id,
                status: false,
              });
              flag = false;
              if (resNew.success) {
                // 重新获取地址信息
                this.getAddress();
              }
            }
          }
        }
      }

      if (flag) {
        this.setState({
          data: res.data,
        });
      }
    }
  };

  // 跳转到编辑地址页
  hanlderToEdit = (id) => {
    this.props.history.replace("editorAddress?id=" + id);
  };
  // 每个地址的选择按钮
  handlerChoice = async (id) => {
    // 该地址不是默认地址
    let flag = true;
    this.state.data.map((v) => {
      if (v.id === id) {
        if (v.isDefault) {
          flag = false;
        }
      }
    });
    if (flag) {
      // 不是默认地址
      // 可以点击修改默认地址
      let res = await changeDefaultAddress({ id: id, status: true });
      if (res.success) {
        // 重新获取地址信息
        this.getAddress();
      }
    }
  };

  render() {
    return (
      <div className={styles.address}>
        <div className={styles.addressHead}>
          <NavBar
            mode="light"
            icon={<Icon type="left" />}
            onLeftClick={() => this.props.history.go(-1)}
          >
            收货地址
          </NavBar>
        </div>
        <div className={styles.addressList}>
          {this.state.data.map((v) => {
            return (
              <div className={styles.listItem} key={v.id}>
                <div
                  className={styles.choice}
                  onClick={this.handlerChoice.bind(this, v.id)}
                >
                  <div
                    className={
                      styles.fontStyle +
                      " iconfont " +
                      (v.isDefault
                        ? "icon-xuanzhong " + styles.colorRed
                        : "icon-xuanzhongyuandian")
                    }
                  ></div>
                </div>
                <div className={styles.nameAndPhone}>
                  {v.name} {v.tel}
                </div>
                <div
                  className={styles.edit}
                  onClick={this.hanlderToEdit.bind(this, v.id)}
                >
                  <div className={styles.fontStyle + " iconfont icon-bi"}></div>
                </div>
              </div>
            );
          })}
        </div>
        <div className={styles.createAddress}>
          <div
            className={styles.createBtn}
            onClick={() => {
              this.props.history.replace("editorAddress");
            }}
          >
            新增地址
          </div>
        </div>
      </div>
    );
  }
}

export default withRouter(Address);
